<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="header-left">
        <view class="icon-btn" @click="showHistory">
          <uni-icons type="list" size="24" color="#333"></uni-icons>
        </view>
      </view>
      <view class="header-center">
        <image class="logo" src="/static/logo.png" mode="heightFit"></image>
      </view>
      <view class="header-right">
        <view class="icon-btn" @click="newChat">
          <uni-icons type="plus" size="24" color="#333"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 聊天区域 -->
    <scroll-view
      class="chat-area"
      scroll-y="true"
      :scroll-top="scrollTop"
      @scrolltoupper="loadMoreMessages"
      :refresher-enabled="true"
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
    >
      <view class="message-list">
        <view
          v-for="(message, index) in messages"
          :key="index"
          :class="[
            'message-item',
            message.type === 'user' ? 'message-right' : 'message-left',
          ]"
        >
          <view class="message-content">
            <text>{{ message.content }}</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部输入区域 -->
    <view class="footer">
      <view class="input-area">
        <textarea
          class="input-box"
          v-model="inputMessage"
          :adjustPosition="true"
          :cursor-spacing="20"
          :show-confirm-bar="false"
          :maxlength="-1"
          @confirm="sendMessage"
          placeholder="请输入消息..."
          auto-height
        />
        <view class="button-group">
          <button class="clear-btn" @click="clearChat">
            <uni-icons type="trash" size="20" color="#333"></uni-icons>
          </button>
          <button
            class="send-btn"
            @click="sendMessage"
            :disabled="!inputMessage.trim()"
          >
            <uni-icons type="paperplane" size="20" color="#333"></uni-icons>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      inputMessage: "",
      scrollTop: 0,
      isRefreshing: false,
    };
  },
  onLoad() {
    // 初始化消息列表
    this.messages = [
      { type: "ai", content: "你好！我是AI助手，有什么我可以帮你的吗？" },
    ];
  },
  methods: {
    showHistory() {
      // 显示历史对话
      uni.showToast({
        title: "历史对话功能开发中",
        icon: "none",
      });
    },
    newChat() {
      // 开始新对话
      this.messages = [
        { type: "ai", content: "你好！我是AI助手，有什么我可以帮你的吗？" },
      ];
    },
    sendMessage() {
      const message = this.inputMessage.trim();
      if (!message) return;

      // 添加用户消息
      this.messages.push({
        type: "user",
        content: message,
      });

      // 清空输入框
      this.inputMessage = "";

      // 模拟AI回复
      setTimeout(() => {
        this.messages.push({
          type: "ai",
          content: "这是一条模拟的AI回复消息。",
        });
        this.scrollToBottom();
      }, 1000);
    },
    clearChat() {
      uni.showModal({
        title: "提示",
        content: "确定要清除所有对话吗？",
        success: (res) => {
          if (res.confirm) {
            this.newChat();
          }
        },
      });
    },
    scrollToBottom() {
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select(".chat-area").boundingClientRect();
        query.exec((res) => {
          if (res[0]) {
            this.scrollTop = res[0].height * 2; // 确保滚动到底部
          }
        });
      });
    },
    loadMoreMessages() {
      // 加载更多历史消息
      console.log("加载更多消息");
    },
    onRefresh() {
      this.isRefreshing = true;
      // 模拟加载
      setTimeout(() => {
        this.isRefreshing = false;
      }, 1000);
    },
  },
};
</script>

<style>
/* 容器样式 */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #f5f5f5;
}

/* 顶部导航栏 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--status-bar-height) 20px 10px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  min-height: 60px;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.header-left,
.header-right {
  flex: 1;
  display: flex;
  align-items: center;
}

.header-left {
  justify-content: flex-start;
}

.header-right {
  justify-content: flex-end;
}

.header-center {
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  width: 40px;
  height: 40px;
}

.icon-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.icon-btn:hover {
  background-color: #f0f0f0;
}

/* 聊天区域 */
.chat-area {
  flex: 1;
  padding: 20px;
  overflow-y: scroll;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.message-item {
  display: flex;
  margin-bottom: 20px;
}

.message-left {
  justify-content: flex-start;
}

.message-right {
  justify-content: flex-end;
}

.message-content {
  max-width: 60%;
  padding: 12px 16px;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  word-break: break-word;
  line-height: 1.5;
}

.message-left .message-content {
  background-color: #ffffff;
  margin-right: 50px;
}

.message-right .message-content {
  background-color: #007aff;
  color: #ffffff;
  margin-left: 50px;
}

/* 底部输入区域 */
.footer {
  background-color: #ffffff;
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
}

.input-area {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.input-box {
  flex: 1;
  min-height: 40px;
  max-height: 120px;
  padding: 10px;
  border-radius: 20px;
  background-color: #f5f5f5;
  font-size: 16px;
  line-height: 1.5;
}

.button-group {
  display: flex;
  gap: 10px;
}

.clear-btn,
.send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 20px;
  background-color: #f5f5f5;
}

.send-btn {
  background-color: #007aff;
  color: #ffffff;
}

.send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 响应式样式 */
@media screen and (max-width: 768px) {
  .container {
    max-width: 100%;
  }

  .message-content {
    max-width: 85%;
  }

  .header {
    padding: 10px;
  }

  .icon-btn {
    padding: 6px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .container {
    max-width: 85%;
  }

  .message-content {
    max-width: 70%;
  }
}

/* 平板和电脑端鼠标悬停效果 */
@media (hover: hover) {
  .icon-btn:hover {
    background-color: #f0f0f0;
  }

  .send-btn:hover:not(:disabled) {
    opacity: 0.9;
  }

  .clear-btn:hover {
    background-color: #e5e5e5;
  }
}
</style>
